<template>
	<view>
		<u-navbar :is-back="showBack" :border-bottom="true">在线客服</u-navbar>
		<view class="width boxwhite">
			<view class="titlesp">客服电话</view>
			<view class="tel flex flex-row-start" @click="callPhone(kefu_phone)">
				<image src="https://www.haopengsong.xyz/static/tel.png" class="telimg"></image>{{kefu_phone}}
			</view>
		</view>
		<view class="width boxwhite">
			<view class="titlesp">客服二维码</view>
			<view class="img">
				<image :src="kefu_wechat"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { kefu } from "@/api/common";
	export default {
		data(){
			return {
				showBack:true,
				kefu_wechat:'',
				kefu_phone:''
			}
		},
		components: {
			
		},
		onShow() {
			this.info()
		},
		methods:{
			callPhone(res){
				uni.makePhoneCall({
					phoneNumber: res//手机号码
				});
			},
			info(){
				kefu().then((resinfo) => {
					this.kefu_wechat = resinfo.kefu_wechat[0].url
					this.kefu_phone = resinfo.kefu_phone
				});		
			},
			//跳转到首页
			leftClick(){
				uni.switchTab({
					url: "/pages/tabbar/home/index"
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.img{
		width:100%;
		height: 220px;
	}
	.telimg{
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}
	.boxwhite{
		padding:10px;
		background-color: #fff;
		margin:20px auto;
	}
	.itemliucheng{
		color: #777;
		font-size: 14px;
		padding: 10px 8px 0 0px;
	}
	.infor{
		.titleyear{
			text-align:right;
			font-size: 12px;
			color:#666;
		}
		background-color: #fff;
		width: 100%;
		margin: auto;
		padding: 15px;
		font-size: 12px;
		color:#333;
		.successimg{
			width: 60px;
			height: 60px;
			margin-right: 10px;
		}
		.carimg{
			width: 20px;
			height: 20px;
			margin-right: 5px;
		}
		.carpaizhao{
			color:#666;
		}
		.shenhetime{
			border-top: 1px solid #ececec;
			padding-top: 20px;
			margin-top: 15px;
			font-size: 12px;
			color:#666;
		}
	}
	.titlesp{
		font-weight: 700;
		font-size: 17px;
		color: #323233;
		letter-spacing: 0;
		position: relative;
		z-index: 2;
		padding-left: 10px;
		margin: 15px auto;
	}
	.tel{
		font-weight: 700;
	}
	.titlesp::after{
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		bottom: 0;
		width: 31px;
		height: 11px;
		background-image: -webkit-gradient(linear, right top, left top, from(#fff), to(#217bfb));
		background-image: -webkit-linear-gradient(right, #fff, to(#217bfb));
		background-image: linear-gradient(270deg, #fff, to(#217bfb));
	}
</style>